<template>
  <div class="rightbody">

    <div class="tabheader2">
      <ul>
        <li :class="{'active':nav_top_btn == 0}" @click="checkNva(0)">{{ navTitle }}</li>
        <li :class="{'active':nav_top_btn == 1}" @click="checkNva(1)">动画</li>
      </ul>
    </div>

    <div class="formtab1" v-show="nav_top_btn == 0">
      <ul>

        <li v-show="checkedItemData.type != 'countDown'">
          <div class="textblock">
            <label>按钮名称</label>
            <Input v-model="btnName" placeholder="请输入..." style="width: 210px;" @on-change="btnNameChange"></Input>
          </div>
        </li>

        <li v-show="checkedItemData.type=='phoneCallButton'">
          <div class="textblock">
            <label>电话号码</label>
            <Input v-model="phoneNumber" placeholder="请输入..." style="width: 210px;"
                   @on-change="phoneNumberChange"></Input>
          </div>
        </li>

        <li v-show="checkedItemData.type=='linkButton'">
          <div class="textblock">
            <label>网址链接</label>
            <Input v-model="linkUrl" placeholder="请输入..." style="width: 210px;" @on-change="linkUrlChange"></Input>
          </div>
        </li>


        <li v-show="checkedItemData.type=='countDown'">
          <div class="textblock">
            <label>截止时间</label>
            <Date-picker type="datetime" format="yyyy-MM-dd HH:mm:ss" :clearable="false" :editable="false"
                         @on-change="deadlineTimeChange" :value="deadlineTime" placeholder="选择日期和时间"
                         style="display:inline-block;width:210px"></Date-picker>
          </div>
        </li>

        <li v-show="checkedItemData.type=='countDown'">
          <div class="textblock">
            <div class="textblock" >
              <label>结束显示</label>
            <Input v-model="endTip" placeholder="请输入..." style="width: 210px;" @on-change="endTipChange"></Input>
          </div>
          </div>
        </li>

        <li>
          <div class="subtabheader">
            <ul>
              <li @click="isTextOrBgColor=1,BgColorListIndex=-99" :class="{active:isTextOrBgColor==1}">文字</li>
              <li @click="isTextOrBgColor=2,BgColorListIndex=-99" :class="{active:isTextOrBgColor==2}">背景</li>
            </ul>
          </div>
          <div class="colortab">
            <template v-for="(item,index) in BgColorList">
              <a :style="setAstyle(index)" @click="changeColor(index)"
                 :class="{'active':BgColorListIndex == index}"></a>
            </template>
            <a class="nocolor" @click="changeColor2" :class="{'active':BgColorListIndex == -2}"></a>
            <p class="colorpicker" :class="{'active':BgColorListIndex == -3}">
              <el-color-picker v-model="color1" @change="changeColor3"></el-color-picker>
            </p>
          </div>
        </li>

        <li>
          <div class="slideblock">
            <label>透明</label>
            <Slider :max="100" :min="0" @on-input="OpacityChange" v-model="opacity" show-input
                    style="float: left;width: 230px;" :tip-format="hideFormat"></Slider>
          </div>
        </li>
        <li>
          <div class="slideblock">
            <label>旋转</label>
            <Slider :max="360" :min="0" v-model="rotateDeg" @on-input="rotateDegChange" show-input
                    style="float:left;width: 230px;" :tip-format="hideFormat"></Slider>
          </div>
        </li>
        <li>
          <div class="numberblock">
            <label>大小</label>
            <div class="inputwidth">
              <span>宽</span>
              <Input-number :max="1000" :min="1" v-model="widthValue" style="width:80px;margin-right:20px;"
                            @on-change="widthValueChange"></Input-number>
            </div>
            <div class="inputheight">
              <span>高</span>
              <Input-number :max="1000" :min="1" v-model="heightValue" style="width:80px;"
                            @on-change="heightValueChange"></Input-number>
            </div>
          </div>
        </li>
      </ul>
      <!--  -->
      <Collapse v-if="userInfo.is_designer==1">
        <Panel name="1">&nbsp;&nbsp;边框样式
          <div class="collapse" slot="content">
            <div class="item">
              <label>样式</label>
              <Select v-model="borderStyle" style="width:225px" @on-change="borderStyleChange">
                <Option v-for="item in options3" :value="item.value" :key="item">{{ item.label }}</Option>
              </Select>
            </div>
            <div class="item clearfix">
              <label>颜色</label>
              <div class="colortab2 clearfix">
                <template v-for="(item,index) in borderColorList">

                  <a :style="setAstyle(index)" @click="changeBorderColor(index)"
                     :class="{'active':borderListIndex == index}"></a>
                </template>
                <a class="nocolor" :class="{'active':borderListIndex == -2}" @click="changeBorderColor2"></a>
                <p class="colorpicker" :class="{'active':borderListIndex == -3}">
                  <el-color-picker v-model="color2" @change="changeBorderColor3"></el-color-picker>
                </p>
              </div>
            </div>
            <div class="item">
              <div class="slideblock">
                <label>粗细</label>
                <Slider :max="20" v-model="borderWidth" @on-input="borderWidthChange" style="float:left;width:230px;"
                        :tip-format="hideFormat" show-input></Slider>
              </div>
            </div>
            <div class="item">
              <div class="slideblock">
                <label>圆角</label>
                <Slider v-model="borderRadius" style="float:left;width:230px;" :tip-format="hideFormat"
                        @on-input="borderRadiusChange" show-input></Slider>
              </div>
            </div>
          </div>
        </Panel>
      </Collapse>
    </div>

    <div class="texttabs2" v-show="nav_top_btn == 1">
      <div class="animbtn">
        <a class="addanimbtn" @click="addAni">添加动画</a>
        <a class="previewanimbtn" @click="reviewAni">预览动画</a>
      </div>
      <div class="animcollapse" v-if="anim.length">
        <!-- <Collapse>&nbsp;</Collapse> -->
        <!-- <template> -->
        <Collapse @on-change="panelChange" :accordion="true">
          <Panel v-for="(aniObj,index) in JSON.parse(anim)" style="background:#fff;position:relative;">动画{{index + 1}}
            <div class="collapse" slot="content">
              <Select v-model="aniObj.type" @on-change="aniTypeChange" style="margin-bottom: 15px;">
                <Option v-for="item in animationList" :value="item.value" :key="item">{{ item.label }}</Option>
              </Select>
              <div class="numberblock">
                <div class="inputtime">
                  <span>时间</span>
                  <Input-number :max="20" :min="0" v-model="aniObj.duration" style="width:80px;margin-right:10px;"
                                @on-change="aniDurationChange"></Input-number>
                </div>
                <div class="inputdelay">
                  <span>延迟</span>
                  <Input-number :max="20" :min="0" v-model="aniObj.delay" style="width:80px;"
                                @on-change="aniDelayChange"></Input-number>
                </div>
              </div>
              <div class="numberblock">
                <div class="inputcount">
                  <span>次数</span>
                  <Input-number :max="10" :min="0" :disabled="aniObj.count == -1"
                                v-model="aniObj.count == -1 ? '': aniObj.count" style="width:80px;margin-right:20px;"
                                @on-change="aniCountChange

      "></Input-number>
                </div>
                <div>
                  <Checkbox style="font-size:14px;width:80px;" @on-change="aniCountChange1">
                    <span>循环</span>
                  </Checkbox>
                </div>
              </div>
            </div>
            <a class="delanimbtn" @click="delAni(index)"></a>

          </Panel>
        </Collapse>
        <!-- </template> -->
      </div>
    </div>
  </div>
</template>


<script>
  import {mapActions, mapGetters} from 'vuex'
  export default {
    computed: {
      ...mapGetters([
        "checkedItemData",
        "userInfo"

      ]),

    },
    data() {
      return {
        navTitle: "",
        btnName: "",
        phoneNumber: "",
        linkUrl: "",
        deadlineTime: "",
        isTextOrBgColor: 1,
        BgColorListIndex: -99,
        opacity: 0,
        navTitle:"",
        btnName:"",
        phoneNumber:"",
        linkUrl:"",
        endTip:"",
        deadlineTime:"",
        isTextOrBgColor:1,
        BgColorListIndex:-99,
        opacity:0,
        rotateDeg: 0,
        widthValue: 0,
        heightValue: 0,
        borderStyle: 'none',
        borderListIndex: -1,
        BgColorList: ["#1abd9b", "#fff", "#45d1d7", "#4b5eb2", "#eeea00", "#f55b2e", "#d92940", "#000"],
        borderColorList: ["#1abd9b", "#fff", "#45d1d7", "#4b5eb2", "#eeea00", "#f55b2e", "#d92940", "#000"],
        borderRadius: 0,
        borderWidth: 0,

        anim: [],
        currentAniIndex: -1,

        color1: null,
        color2: null,
        borderShadow: 0,
        BorderShadowColor: "",

        borderShadowColorIndex: -1,


        copyCss: {},
        nav_top_btn: 0,
        options3: [{
          value: 'none',
          label: '无'
        }, {
          value: 'dotted',
          label: '点'
        }, {
          value: 'solid',
          label: '实线'
        }, {
          value: 'dashed',
          label: '虚线'
        }],
        options4: [{
          value: 'linktype1',
          label: '页面'
        }, {
          value: 'linktype2',
          label: '网址'
        }],
        options6: [{
          value: 'enteranim1',
          label: '飞入1'
        }, {
          value: 'enteranim2',
          label: '飞入2'
        }],
        animationList: [{
          value: 'none',
          label: '无效果'
        }, {
          value: 'fadeInNormal',
          label: '淡入'
        }, {
          value: 'rotateInDownLeft',
          label: '从左滚入'
        }, {
          value: 'rotateInDownRight',
          label: '从右滚入'
        }, {
          value: 'zoomIn',
          label: '放大'
        }, {
          value: 'zoomInDown',
          label: '下落放大'
        }, {
          value: 'fadeIn',
          label: '弹性放大'
        }, {
          value: 'expandOpen',
          label: '弹性缩小'
        }, {
          value: 'fadeInLeft',
          label: '从右飞入'
        }, {
          value: 'fadeInRight',
          label: '从左飞入'
        }, {
          value: 'fadeInUp',
          label: '向上飞入'
        }, {
          value: 'fadeInDown',
          label: '向下飞入'
        }, {
          value: 'rotateIn',
          label: '旋转出现'
        }, {
          value: 'flipInY',
          label: '左右翻转'
        }, {
          value: 'flipInX',
          label: '上下翻转'
        }, {
          value: 'lightSpeedIn',
          label: '刹车'
        }, {
          value: 'slideRight',
          label: '从右滑入'
        }, {
          value: 'slideLeft',
          label: '从左滑入'
        }, {
          value: 'slideUp',
          label: '向上滑入'
        }, {
          value: 'slideDown',
          label: '向下滑入'
        }, {
          value: 'stretchRight',
          label: '从右展开'
        }, {
          value: 'stretchLeft',
          label: '从左展开'
        }, {
          value: 'pullUp',
          label: '向上展开'
        }, {
          value: 'pullDown',
          label: '向下展开'
        }
        ],

        fontSize: 0,
        options2: [],
      }
    },
    mounted(){
      Date.prototype.toLocaleString = function () {
        return this.getFullYear() + "-" + ((this.getMonth() + 1) > 10 ? (this.getMonth() + 1) : "0" + (this.getMonth() + 1)) + "-" + (this.getDate() > 10 ? this.getDate() : "0" + this.getDate()) + " " + (this.getHours() > 10 ? this.getHours() : "0" + this.getHours()) + ":" + (this.getMinutes() > 10 ? this.getMinutes() : "0" + this.getMinutes()) + ":" + (this.getSeconds() > 10 ? this.getSeconds() : "0" + this.getSeconds());
      };
//      console.log(this.checkedItemData)
      this.givedata(this.checkedItemData);
    },
    watch: {

      checkedItemData: function (newCheckedItemData) {

        this.givedata(newCheckedItemData);
      }
    },
    methods: {
      givedata(data){
        // debugger
        if (data.type == "phoneCallButton") {
          this.navTitle = "电话";

        }else if (data.type == "countDown") {

          this.navTitle = "倒计时";
        } else if (data.type == "linkButton") {

          this.navTitle = "链接";
        } else if (data.type == "interActionButton") {
          this.navTitle = "点赞";
        }

        this.btnName = data.content;
// "2017-02-33 22:22:22"
        var deadlineTime = typeof(data.in.properties.deadlineTime) == "undefined" ? 0 : data.in.properties.deadlineTime;
        deadlineTime.toString().length == 10 ? deadlineTime = deadlineTime * 1000 : deadlineTime;
        this.deadlineTime = new Date(new Date(deadlineTime)).toLocaleString();

        this.endTip = data.in.properties.endtip

//        console.log(this.deadlineTime)
        this.phoneNumber = data.in.properties.tel;
        this.linkUrl = data.in.properties.url;
        this.opacity = 100 - data.out.css.opacity * 100;
        this.rotateDeg = typeof(data.out.css.transform) == "undefined" ? 0 : parseInt(data.out.css.transform.match(/\d+(\.\d+)?/g)[0]);
        this.widthValue = typeof(data.in.css.width) == "undefined" ? 0 : parseInt(data.in.css.width);
//        console.log(this.widthValue + "this.widthValue")

        this.heightValue = typeof(data.in.css.height) == "undefined" ? 0 : parseInt(data.in.css.height);
        this.borderStyle = typeof(data.in.css.borderStyle) == "undefined" ? "none" : data.in.css.borderStyle;
        this.borderWidth = typeof(data.in.css.borderWidth) == "undefined" ? 0 : parseInt(data.in.css.borderWidth.replace("px", ""));
        this.borderRadius = typeof(data.in.css.borderRadius) == "undefined" ? 0 : parseInt(data.in.css.borderRadius.replace("px", ""));
        this.anim = JSON.stringify(data.anim);

      },
      formatDate(now)   {
        var year = now.getFullYear();
        var month = now.getMonth() + 1;
        var date = now.getDate();
        var hour = now.getHours();
        var minute = now.getMinutes();
        var second = now.getSeconds();
        return year + "-" + month + "-" + date + " " + hour + ":" + minute + ":" + second;
      },
      checkNva(index) {
        switch (index) {
          case 0:
            this.nav_top_btn = 0
            break;
          case 1:
            this.nav_top_btn = 1
            break;
          case 2:
            this.nav_top_btn = 2
            break;
        }
      },
      hideFormat () {
        return null;
      },
      setAstyle(index){

// debugger
        var color = this.BgColorList[index];

        return "background: " + color;

      },
      btnNameChange(){
        var params = {};
        params.key = "content";
        params.value = this.btnName;
        this.$store.dispatch('changePhoneButton', params);

      },
      linkUrlChange(){

        var params = {};
        params.key = "url";
        params.value = this.linkUrl;
        this.$store.dispatch('changePhoneButton', params);
      },
      phoneNumberChange(){
        var params = {};
        params.key = "tel";
        params.value = this.phoneNumber;
        this.$store.dispatch('changePhoneButton', params);
      },
      changeColor(index){
        // debugger
        this.BgColorListIndex = index;
        var color = this.BgColorList[index];
            var params = {};
            params.key = "url";
            params.value = this.linkUrl;
            this.$store.dispatch('changePhoneButton',params);
        },
        endTipChange(){

            var params = {};
            params.key = "endtip";
            params.value = this.endTip;
            this.$store.dispatch('changePhoneButton',params);

        },
        phoneNumberChange(){
            var params = {};
            params.key = "tel";
            params.value = this.phoneNumber;
            this.$store.dispatch('changePhoneButton',params);
        },
       changeColor(index){
            // debugger
            this.BgColorListIndex = index;
            var color = this.BgColorList[index];


        //修改文字颜色
        var params = {};
        //修改文字颜色
        if (this.isTextOrBgColor == 1) {

          params.value = color;
          params.key = "color";

        } else {

          params.value = color;
          params.key = "backgroundColor";

        }

        this.$store.dispatch('changePhoneButton', params)

      },
      changeColor2(){

        this.BgColorListIndex = -2;

        // debugger

        var params = {};
        //修改文字颜色
        if (this.isTextOrBgColor == 1) {

          params.value = "";
          params.key = "color";

        } else {

          params.value = "";
          params.key = "backgroundColor";

        }

        this.$store.dispatch('changePhoneButton', params)
      },
      changeColor3(value){
        // debugger
        this.BgColorListIndex = -3;

        // console.log(value)

        var params = {};
        //修改文字颜色
        if (this.isTextOrBgColor == 1) {

          params.value = value;
          params.key = "color";

        } else {

          params.value = value;
          params.key = "backgroundColor";

        }

        this.$store.dispatch('changePhoneButton', params)
      },
      OpacityChange(value){

        var params = {};
        params.value = value;
        params.key = "opacity";
        params.type = "out";

        this.$store.dispatch('changePhoneButton', params)

      },
      rotateDegChange(value){

        // this.rotateDeg = value;
        var params = {};
        params.value = "rotateZ(" + value + "deg)";
        params.key = "transform";
        params.type = "out";

        this.$store.dispatch('changePhoneButton', params)


      },
      widthValueChange(value){

        var params = {};
        params.value = value;
        params.key = "width";
        // debugger
        this.$store.dispatch('changePhoneButton', params)

      },
      heightValueChange(value){

        var params = {};
        params.value = value;
        params.key = "height";
        // debugger
        this.$store.dispatch('changePhoneButton', params)

      },
      borderStyleChange(value){

        var params = {};
        params.value = value;
        params.key = "borderStyle";
        // console.log(params.value)

        this.$store.dispatch('changePhoneButton', params)
      },
      borderWidthChange(value){
        var params = {};
        params.value = value + "px";
        params.key = "borderWidth";
        // console.log(params.value)
        // debugger
        this.$store.dispatch('changePhoneButton', params)

      },
      changeBorderColor(index){

        var color = this.borderColorList[index];

        this.borderListIndex = index;
        var params = {};
        params.value = color;
        params.key = "borderColor";
        this.$store.dispatch('changePhoneButton', params)


      },
      changeBorderColor2(){
        this.borderListIndex = -2;

        this.clearBorderStyle();
        var params = {};
        params.value = "";
        params.key = "borderColor";

        // debugger
        this.$store.dispatch('changePhoneButton', params)

      },
      clearBorderStyle(){

        var params = {};
        params.value = "none";
        params.key = "borderStyle";

        // debugger
        this.$store.dispatch('changePhoneButton', params)
      },
      changeBorderColor3(value){

        var params = {};
        params.value = value;
        params.key = "borderColor";

        // debugger
        this.$store.dispatch('changePhoneButton', params)

      },
      borderRadiusChange(value){
//        console.log(value)
        var params = {};
        params.value = value + "px";
        params.key = "borderRadius";
        // params.type = "out";

        // debugger
        this.$store.dispatch('changePhoneButton', params)
      },
      borderShadowChange(value){
        var params = {};
        this.borderShadow = value;
        params.value = this.BorderShadowColor + " 0px 0px " + value + "px";
        params.key = "boxShadow";
        params.type = "out";
        // debugger
        this.$store.dispatch('changePhoneButton', params)

      },
      changeBorderShadowColor(index){

        var color = this.borderColorList[index];
        this.BorderShadowColor = color;
        this.borderShadowColorIndex = index;

        var params = {};
        params.value = color + " 0px 0px " + this.borderShadow + "px";
        params.key = "boxShadow";
        params.type = "out";
        this.$store.dispatch('changePhoneButton', params)
      },
      changeBorderShadowColor2(){
        this.borderShadowColorIndex = -2;
        this.borderListIndex = -2;
        this.BorderShadowColor = "";
        // this.clearBorderStyle();
        var params = {};
        params.value = "" + " 0px 0px " + this.borderShadow + "px";
        params.key = "boxShadow";
        params.type = "out";
        // debugger
        this.$store.dispatch('changePhoneButton', params)
      },
      changeBorderShadowColor3(value){

        this.BorderShadowColor = value;
        var params = {};
        params.value = value + " 0px 0px " + this.borderShadow + "px";
        params.key = "boxShadow";
        params.type = "out";
        // debugger
        this.$store.dispatch('changePhoneButton', params)
      },


      //添加动画
      addAni(){

        var params = {};
        params.type = "add";


        this.$store.dispatch('changeAni', params)
      },
      //删除动画
      delAni(index){

        var params = {};
        params.type = "del";
        params.index = index;

        this.$store.dispatch('changeAni', params)

      },
      //预览动画
      reviewAni(){

        // var anim = this.$store.state.workData.pages[this.$store.state.currentPage - 1].elements[this.$store.state.checkedItems[0]].anim


        this.$store.dispatch('reviewAni');


      },
      panelChange(key){

        // console.log(key);
        this.currentAniIndex = parseInt(key[0]);
        // debugger
      },
      aniTypeChange(value){

//        console.log('value' + value);
        var params = {};
        params.index = this.currentAniIndex;
        params.key = "type";
        params.value = value;
        this.$store.dispatch('changeAni', params)
      },
      aniDurationChange(value){

        // console.log('value' + value);
//        console.log('value' + value);
        var params = {};
        params.index = this.currentAniIndex;
        params.key = "duration";
        params.value = value;
        this.$store.dispatch('changeAni', params)

      },
      aniDelayChange(value){
        var params = {};
        params.index = this.currentAniIndex;
        params.key = "delay";
        params.value = value;
        this.$store.dispatch('changeAni', params)

      },
      aniCountChange(value){

        var params = {};
        params.index = this.currentAniIndex;
        params.key = "count";
        params.value = value;
        this.$store.dispatch('changeAni', params)

      },
      aniCountChange1(value){
        var params = {};
        params.index = this.currentAniIndex;
        params.key = "count";
        params.value = (value == true ? -1 : 1);

        this.$store.dispatch('changeAni', params)
      },
      deadlineTimeChange(value){

        // console.log(value)

        var params = {};
        params.index = this.currentAniIndex;
        params.key = "deadlineTime";
        params.value = this.transdate(value);
        this.$store.dispatch('changeDeadLineTime', params)
      },
      transdate(endTime){
        var date = new Date();
        date.setFullYear(endTime.substring(0, 4));
        date.setMonth(endTime.substring(5, 7) - 1);
        date.setDate(endTime.substring(8, 10));
        date.setHours(endTime.substring(11, 13));
        date.setMinutes(endTime.substring(14, 16));
        date.setSeconds(endTime.substring(17, 19));
        return Date.parse(date) / 1000;
      }
    }
  }
</script>


<style type="text/javascript">

</style>
